<!doctype html>

<meta charset="utf-8">

<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>Pickadate.js</title>

<link rel="stylesheet" href="demo/style.css">
<link rel="stylesheet" href="themes/pickadate.01.default.css">

<!--[if lt IE 9]>
    <script>document.createElement('section')</script>
<![endif]-->


<body>


    <section class="holder holder-top">

        <h1><strong title="Pick a Date" class="underline-highlight">pickadate.js</strong></h1>
        <h2>A mobile-friendly, responsive, and lightweight jQuery dateinput picker<br><small class="dimmed"><small><small>9.6kb min, 4.0kb gzipped</small></small></small></h2>

        <a href="https://github.com/amsul/pickadate.js"><img width="124" height="124" style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

        <h3>As easy as: <code data-language="javascript">$('.datepicker').pickadate()</code>.</h3>
        <h3>Go ahead&hellip; pick a date.</h3>

        <fieldset>
            <input id="input_01" class="datepicker" type="text">
        </fieldset>

        <ul class="list-inline clear">
            <li><a class="button-pill" href="docs.htm#selectors">Month &amp; year dropdowns</a></li>
            <li><a class="button-pill" href="docs.htm#translations">Translations</a></li>
            <li><a class="button-pill" href="docs.htm#first_day">First day of week</a></li>
            <li><a class="button-pill" href="docs.htm#strings">Custom strings</a></li>
            <li><a class="button-pill" href="docs.htm#formats">Date formats</a></li>
            <li><a class="button-pill" href="docs.htm#ranges">Date ranges</a></li>
            <li><a class="button-pill" href="docs.htm#disable_dates">Dates disabled</a></li>
            <li><a class="button-pill" href="docs.htm#events">Calendar events</a></li>
            <li><a class="button-pill" href="docs.htm#api_clear">Inline &ldquo;clear&rdquo; button</a></li>
            <li><a class="button-pill" href="docs.htm#api_from_to">&ldquo;From&rdquo; and &ldquo;to&rdquo; pickers</a></li>
            <li><a class="button-pill" href="docs.htm#simple">Editable input</a></li>
            <li><a class="button-pill" href="themes.htm">Easy theming</a></li>
            <li><small>And <a href="docs.htm">many more options</a>.</small></li>
        </ul>


        <div class="aligncenter">
            <p><a class="button-full" href="https://github.com/amsul/pickadate.js/archive/gh-pages.zip">Download pickadate.js v2.1.8</a></p>
            <p><a class="button-full--secondary" href="themes.htm">View calendar themes</a></p>
            <small class="dimmed">
                <p>Browser support: <a class="dimmed" href="docs.htm#legacy">IE7+</a>, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser</p>
                <p>Dependency: jQuery 1.7+</p>
            </small>
            <p><a href="docs.htm">Read the docs</a> or <a href="https://github.com/amsul/pickadate.js">view project on Github</a></p>
        </div>

    </section>


    <section class="holder holder-clean aligncenter">
        <h2><a href="http://blog.teamtreehouse.com/" target="_blank"><img width="158" height="33" src="demo/TreehouseShowFeature.png" alt="Featured on The Treehouse Show"></a></h2>
        <p class="dimmed"><small>Made by <a class="dimmed" href="https://twitter.com/amsul_" target="_blank">Amsul</a><span class="peace"></span></small></p>
    </section>


    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="demo/rainbow.js"></script>
    <script src="source/pickadate.legacy.js"></script>

    <script type="text/javascript">
        $( '[type=date], .datepicker' ).pickadate()
    </script>


    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36321179-2']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>


</body>
